<template>
	<view class="licai">
		<!-- <Head></Head> -->
		<view class="headss">
			<view class="text">优质理财 文件理财</view>
			<view class="boder"></view>
			<view class="text1">求稳又求赢</view>
			<view class="text3">
				<view class="box">稳定服务</view>
				<view class="box">专业分控</view>
				<view class="box">安心选择</view>
			</view>
		</view>
		<view class="licai">
			<LicaiCar></LicaiCar>
		</view>

		<view class="linghuo">
			<view class="text" >
				<text style="color: #333333; font-size: 36rpx; font-weight: 600;">灵活存取</text>
				<text style="color: #cdcdcd; font-size: 22rpx; margin-left: 20rpx;">活期理财 随存随取</text>
			</view>
			<view class="text1">
				<text>更多</text>
				<image src='../../static/iamges/jiaobiao2.png' mode=""></image>
			</view>
		</view>
		<view class="tab">
			<view class="tab1" v-for="(item,index) in currentSift" :key='index'>
				<view class="tab2">
					<view style="font-size: 40rpx; color: #ff4658; font-weight: 600;">{{item.currentProductChgLastWeek}}%</view>
					<view style="margin-top: 10rpx; color: #cdcdcd; font-size: 22rpx;">七日年化收益率</view>
				</view>
				<view class="tab2 " style="padding-top: 15rpx;">
					<view style=" color: #333333; font-size: 28rpx;">{{item.currentProductName}}</view>
					<view style="margin-top: 10rpx; color: #cdcdcd; font-size: 22rpx;">灵活转出{{item.currentSupplierPropertyBuy}}元起购</view>
				</view>
			</view>
		<!-- 	<view class="tab1">
				<view class="tab2">
					<view style="font-size: 40rpx; color: #ff4658; font-weight: 600;">3.02%</view>
					<view style="margin-top: 10rpx; color: #cdcdcd; font-size: 22rpx;">七日年化收益率</view>
				</view>
				<view class="tab2 " style="padding-top: 15rpx;">
					<view style=" color: #333333; font-size: 28rpx;">国金众赢货币</view>
					<view style="margin-top: 10rpx; color: #cdcdcd; font-size: 22rpx;">货币基金100元起购</view>
				</view>
			</view> -->
		</view>
		<view class="linghuo">
			<view class="text">
				<text style="color: #333333; font-size: 36rpx; font-weight: 600;">基金组合</text>
				<text style="color: #cdcdcd; font-size: 22rpx; margin-left: 20rpx;">目标止益 落袋为安</text>
			</view>
			<view class="text1">
				<text>更多</text>
				<image src='../../static/iamges/jiaobiao2.png' mode=""></image>
			</view>
		</view>
		<view class="zhuhe">
			<view class="item">
				<view style="color: #333333; font-size: 36rpx; font-weight: 600; margin-top: 10rpx;">汇添富双利债券A</view>
				<view class="buts">人气精选</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Head from '../../components/licai/heads.vue';
	import LicaiCar from '../../components/licai/licaiCar.vue'
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapState,
		mapMutations,
		mapActions
	} = createNamespacedHelpers('licai');
	export default {
		components: {
			Head,
			LicaiCar
		},
		data() {
			return {

			}
		},
		onShow(){
			this.getcurrentSifts()
			//this.gethighProducts()
		
		},
		methods: {
			...mapActions(['getcurrentSifts','gethighProducts'])
			
		},
		computed:{
			...mapState(['currentSift','highProduct'])
		}
	}
</script>

<style lang="scss" scoped>
	.zhuhe {

		width: 90%;
		margin: 20rpx auto;
		border-radius: 20rpx;
		background-color: #FFFFFF;

		.item {
			height: 80rpx;

			display: flex;

			.buts {
				margin-left: 20rpx;
				margin-top: 20rpx;
				background-color: #ffecee;
				color: #ff4658;
				font-size: 24rpx;
				width: 120rpx;
				text-align: center;
				height: 40rpx;
			}
		}
	}

	.linghuo {
		margin-top: 40rpx;
		padding: 0px 30rpx;
		display: flex;

		.text {
			width: 70%;
		}

		.text1 {
			width: 30%;
			text-align: right;

			image {
				height: 20rpx;
				width: 10rpx;
				margin-left: 20rpx;
			}
		}
	}

	.licai {
		.tab {
			

			width: 90%;
			margin: 20rpx auto;
			border-radius: 20rpx;

			.tab1 {
				height: 50%;

				display: flex;

				.tab2 {
					width: 50%;

					text-align: left;
					padding-top: 10rpx;
					padding-left: 20rpx;
				}
			}
		}
	}

	.headss {
		width: 100%;
		height: 400rpx;
		background-color: #ff4558;
		border-radius: 0px 0px 30% 30%;
		padding-top: 30rpx;

		.text3 {
			display: flex;
			height: 100rpx;

			margin-top: 70rpx;

			.box {
				width: 33.33%;

				text-align: center;
				line-height: 100rpx;
				color: #FFFFFF;
			}
		}

		.boder {
			border: 1px solid #FFFFFF;
			width: 60%;
			border-top: 1px solid #FFFFFF;
			margin: 0 auto;
		}

		.text1 {
			width: 20%;
			margin: -20rpx auto;
			background: #ff4558;
			color: #FFFFFF;
		}

		.text {
			font-size: 48rpx;
			color: #FFFFFF;
			width: 100%;
			text-align: center;
			margin-bottom: 30rpx;

		}
	}
</style>
